import {
  Drawer,
  Form,
  Button,
  Col,
  Row,
  Input,
  Select,
  InputNumber,
} from "antd";
import React, { Component } from "react";
import { PlusOutlined } from "@ant-design/icons";
import { Productonsalelist } from "../../../services/auth";

const { Option } = Select;

export default class AddGoods extends Component {
  constructor(props) {
    super(props);
    this.handleAddClick = this.props.handleAddClick;
    this.state = { visible: false, goodsList: [] };
  }

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
    this.formRef.current.resetFields();
  };

  onFinish = (value) => {
    this.handleAddClick({
      ...value,
      goods_id: this.state.goodsList[value.goods_id - 1].id,
      goods_name: this.state.goodsList[value.goods_id - 1].name,
    });
    this.onClose();
  };
  onChange = (value) => {
    if (value) {
      let data = this.formRef.current.getFieldsValue(true);
      this.formRef.current.setFieldsValue({
        price: this.state.goodsList[value - 1].price,
      });
      if (data.discount) {
        this.formRef.current.setFieldsValue({
          current_price:
            (data.discount * this.state.goodsList[value - 1].price) / 100,
        });
      }
    } else {
      this.formRef.current.resetFields();
    }
  };
  onBlur = () => {
    let value = this.formRef.current.getFieldsValue(true);
    if (value.price) {
      this.formRef.current.setFieldsValue({
        current_price: (value.discount * value.price) / 100,
      });
    }
  };

  componentDidMount() {
    Productonsalelist().then(
      (response) => {
        //拿到我们想要渲染的数据(res)
        this.setState({
          goodsList: response.data,
        });
      },
      (error) => {
        console.log("失败了", error);
      }
    );
  }
  formRef = React.createRef();

  render() {
    return (
      <div>
        <Button
          type="link"
          onClick={this.showDrawer}
          size="small"
          icon={<PlusOutlined />}
        >
          添加商品
        </Button>
        <Drawer
          title="添加商品"
          width={500}
          onClose={this.onClose}
          visible={this.state.visible}
          bodyStyle={{ paddingBottom: 80 }}
        >
          <Form
            layout="vertical"
            hideRequiredMark
            onFinish={this.onFinish}
            ref={this.formRef}
          >
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item name="goods_id" label="商品">
                  <Select
                    placeholder="请选择商品"
                    allowClear
                    onChange={this.onChange}
                  >
                    {this.state.goodsList.map((goods, index) => (
                      <Option value={index + 1} key={goods.id}>
                        {goods.id + " " + goods.name}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="quantity"
                  label="数量"
                  rules={[{ required: true, message: "请输入数量" }]}
                >
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item name="price" label="价格">
                  <Input disabled />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item name="current_price" label="折后价格">
                  <Input disabled />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={6}>
                <Form.Item
                  name="discount"
                  label="折扣"
                  rules={[{ required: true, message: "请输入折扣" }]}
                >
                  <InputNumber
                    min={0}
                    max={100}
                    formatter={(value) => `${value}%`}
                    parser={(value) => value.replace("%", "")}
                    onBlur={this.onBlur}
                  />
                </Form.Item>
              </Col>
            </Row>

            <Form.Item>
              <div
                style={{
                  textAlign: "right",
                  marginTop: "24px",
                }}
              >
                <Button onClick={this.onClose} style={{ marginRight: 8 }}>
                  取消
                </Button>
                <Button htmlType="reset" style={{ marginRight: 8 }}>
                  重置
                </Button>
                <Button type="primary" htmlType="submit">
                  确定
                </Button>
              </div>
            </Form.Item>
          </Form>
        </Drawer>
      </div>
    );
  }
}
